<template>
<div>
  <van-nav-bar title="选配商品" left-div="返回" left-arrow @click-left="onClickLeft" fixed />
  <div style="height:46px"></div>
  <van-tree-select height="165vw" :items="items" :main-active-index.sync="active">
    <template #content>
      <div v-if="active === 0">
        <van-divider>水果</van-divider>
        <div class="contents">
          <div class="contents-item">
            <img class="item-img" src="@/assets/img/水果.png">
            <span class="item-name">大冬瓜</span>
          </div>
          <div class="contents-item">
            <img class="item-img" src="@/assets/img/水果.png">
            <span class="item-name">大冬瓜</span>
          </div>
        </div>
      </div>
      <div v-if="active === 1">
        <van-divider>蔬菜</van-divider>
        <div class="contents">
          <div class="contents-item">
            <img class="item-img" src="@/assets/img/蔬菜.png">
            <span class="item-name">大冬瓜</span>
          </div>
          <div class="contents-item">
            <img class="item-img" src="@/assets/img/蔬菜.png">
            <span class="item-name">大冬瓜</span>
          </div>
        </div>
      </div>
      <div v-if="active === 2">
        <van-divider>肉食</van-divider>
        <div class="contents">
          <div class="contents-item">
            <img class="item-img" src="@/assets/img/肉食.png">
            <span class="item-name">大冬瓜</span>
          </div>
          <div class="contents-item">
            <img class="item-img" src="@/assets/img/肉食.png">
            <span class="item-name">大冬瓜</span>
          </div>
        </div>
      </div>
      <div v-if="active === 3">
        <van-divider>休闲</van-divider>
        <div class="contents">
          <div class="contents-item">
            <img class="item-img" src="@/assets/img/休闲.png">
            <span class="item-name">大冬瓜</span>
          </div>
          <div class="contents-item">
            <img class="item-img" src="@/assets/img/休闲.png">
            <span class="item-name">大冬瓜</span>
          </div>
        </div>
      </div>
    </template>
  </van-tree-select>
</div>
</template>

<script>
export default {
  name: 'optional',
  data() {
    return {
      active: 0,
      items: [{
        text: '水果'
      }, {
        text: '蔬菜'
      }, {
        text: '肉食'
      }, {
        text: '休闲'
      }, {
        text: '娱乐'
      }, {
        text: '民宿'
      }, {
        text: '运动'
      }, {
        text: '景点'
      }],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: 'home'
      })
    },
  },
}
</script>

<style lang="less">
.van-divider {
  color: '#f7f8fa;';
  border-color: '#f7f8fa;';
  padding: 0 16px
}

.contents {
  width: 230px;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}

.contents-item {
  display: flex;
  flex-direction: column;
  width: 108px;
  height: 108px;
  background: #FFFFFF;
  box-shadow: 0px 3px 14px rgba(78, 112, 184, 0.07);
  border-radius: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}

.item-img {
  width: 60px;
  height: 60px;
  margin-bottom: 8px;
}

.item-name {
  font-size: 14px;
  font-weight: bold;
  color: #2C2E34;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
